<!-- 专题列表 -->
<template>
  <view v-if="shenheStatus == 0" class="special" :style="[boxStyle]">
    <!-- tar栏 -->
    <scroll-view scroll-x="true" class="special-top">
      <!-- 全部 -->
      <view
        :class="['special-top-list', current == -2 && 'select']"
        @click="selectType(-2, 0)"
      >
        {{ $t('person.cashStatus1') }}
      </view>
      <!-- 精选 -->
      <view
        :class="['special-top-list', current == -1 && 'select']"
        @click="selectType(-1, -1)"
      >
        {{ $t('home.select') }}
      </view>
      <!-- 数据库列表 -->
      <view
        :class="['special-top-list', current == index && 'select']"
        v-for="(item, index) in arrlist"
        :key="index"
        @click="selectType(index, item.id)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <!-- tar栏 -->

    <!-- 列表内容 -->
    <view class="special-list" v-for="(item, index) in list" :key="index">
      <!-- 左右排版 -->
      <view
        class="special-list-modeone"
        v-if="item.layout == 0"
        @click="goTopic(item.id)"
      >
        <view>
          <view class="text-more-2 title">{{ item.title }}</view>
          <view class="list-modeone-one">
            <view>{{
              $utils.turnDate(item.addtime * 1000, 'yyyy-mm-dd')
            }}</view>
            <view>{{ item.read_count }}</view>
            <view v-if="item.goods_count">{{ item.goods_count }}</view>
          </view>
        </view>
        <image :src="item.cover_pic" mode="aspectFill"></image>
      </view>
      <!-- 左右排版 -->

      <!-- 上下排版 -->
      <view
        class="special-list-modetwo"
        v-if="item.layout == 1"
        @click="goTopic(item.id)"
      >
        <view class="title text-more-2">{{ item.title }}</view>
        <image :src="item.cover_pic" mode="aspectFill"></image>
        <view>
          <view>{{ $utils.turnDate(item.addtime * 1000, 'yyyy-mm-dd') }}</view>
          <view>{{ item.read_count }}</view>
          <view v-if="item.goods_count">{{ item.goods_count }}</view>
        </view>
      </view>
      <!-- 上下排版 -->
    </view>
    <view class="loadmore">{{ loadmore }}</view>
    <div class="footNav fixed" v-if="useFoot">
      <template v-for="(item, index) in controls">
        <footNav
          v-if="item.type == 'foot_nav'"
          :key="index"
          :param="item.param"
        ></footNav>
      </template>
    </div>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  data() {
    return {
      arrlist: [], //专题分类内容
      current: -2, //控制选中当前分类
      currentpage: 1, //当前页码
      list: [], //列表内容数据
      loadmore: this.$t('home.pullUp'),
      id: '',
      useFoot: false,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.$t('title.special'),
    });
    this.getSpecialTpye(options);
  },
  onShow() {
    setTimeout(() => {
      try {
        this.useFoot = this.$utils.useFoot(this.controls);
      } catch (e) {}
    }, 500);
  },
  onReachBottom() {
    this.loadmore = this.$t('home.loading');
    var params = {
      page: this.currentpage,
      type: this.id,
      reload: true,
      limit: 10,
    };
    this.$allrequest.special.getTopicList(params).then(res => {
      if (res.code == 0) {
        if (res.data.list.length == 0) {
          this.loadmore = this.$t('home.noMore');
          return;
        }
        this.list = this.list.concat(res.data.list);
        this.currentpage = this.currentpage + 1;
      }
    });
  },
  methods: {
    //获取所有专题分类
    getSpecialTpye(options) {
      var params = {};
      this.$allrequest.special.getTopicType(params).then(res => {
        if (res.code == 0) {
          this.arrlist = res.data.list;
					if (this.arrlist.length > 0 && options.id) {
						let index = this.arrlist.findIndex(item => item.id == options.id);
						if (index >= 0) {
							this.selectType(index, options.id)
						}
					}
        }
      });
      this.getSpecialList(0);
    },
    //获取某个专题下的列表
    getSpecialList(id) {
      this.loadmore = this.$t('home.loading');
      var params = {
        page: this.currentpage,
        type: id,
        reload: true,
        limit: 10,
      };
      this.$allrequest.special.getTopicList(params).then(res => {
        if (res.code == 0) {
          if (res.data.list.length < 10) {
            if (res.data.list.length == 0) {
              this.loadmore = this.$t('common.noContent');
              return;
            } else {
              this.loadmore = this.$t('home.noMore');
            }
          } else {
            this.loadmore = this.$t('home.pullUp');
          }
          this.list = res.data.list;
          this.currentpage = this.currentpage + 1;
        }
      });
    },
    //选择专题分类
    selectType(index, id) {
      this.current = index;
      this.id = id;
      this.currentpage = 1;
      this.list = [];
      this.getSpecialList(id);
    },
    goTopic(id) {
      uni.navigateTo({
        url: './topic?id=' + id,
      });
    },
  },
  computed: {
    boxStyle() {
      return {
        paddBottom: this.useFoot
          ? 'calc(env(safe-area-inset-bottom) + 100rpx)'
          : '0px',
      };
    },
  },
  filters: {
    dateFilter(data) {
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
.special {
  padding-top: 90rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.special-top {
  color: #262626;
  z-index: 999;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 90rpx;
  white-space: nowrap;
  background-color: #ffffff;

  .special-top-list {
    position: relative;
    display: inline-block;
    margin-right: 69rpx;
    font-size: 30rpx;
    height: 90rpx;
    line-height: 80rpx;
    text-align: center;
    &:nth-child(1) {
      margin-left: 35rpx;
    }
    &:nth-last-child(1) {
      margin-right: 35rpx;
    }
  }
  .select {
    font-weight: 600;
    &::before {
      content: '';
      position: absolute;
      bottom: 19rpx;
      left: 50%;
      transform: translate(-50%, 0);
      width: 52rpx;
      height: 6rpx;
      background: #f7271f;
    }
  }
}

.special-list-modeone {
  // margin-bottom: 24rpx;
  margin: 24rpx 25rpx;
  display: flex;
  padding: 31rpx 22rpx 32rpx 25rpx;
  border-radius: 16rpx;
  justify-content: space-between;
  background-color: #ffffff;

  > image {
    width: 216rpx;
    height: 170rpx;
    background: #f2f2f2;
    border-radius: 10rpx;
  }

  > view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 56rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      line-height: 42rpx;
    }

    .list-modeone-one {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      line-height: 23rpx;
      view {
        margin-right: 24rpx;
      }
    }
  }
}

.special-list-modetwo {
  margin: 24rpx 0;
  padding: 31rpx 24rpx;
  background-color: #ffffff;

  border-radius: 16rpx;
  .title {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
    line-height: 42rpx;
  }

  > image {
    width: 100%;
    max-height: 360px;
    background: #f2f2f2;
    border-radius: 10rpx;
  }

  > view:last-child {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    height: 23rpx;
    font-size: 24rpx;
    color: #999999;

    view {
      margin-right: 24rpx;
    }
  }
}

.loadmore {
  font-size: 20rpx;
  margin: 16rpx 0rpx;
  text-align: center;
  color: #888;
}
</style>
